<template>
	<view class="scrollBox" v-for="item in sortList">
		<view class="scrollBox_Left">
			{{item.className}}
			<!-- {{item.list}} -->
		</view>
		<scroll-view class="scroll_view" scroll-x="true">
			<template v-for="(item1,index) in item.list">
				<view :class="activeNum == index && activeText == item1.poemsDynasty ? 'itemActive' : ''"
					@click="handlebtn(item1,index)">{{item1.poemType}}</view>
			</template>
		</scroll-view>
	</view>
	<view class="">
	<!-- 1111---{{sortList}} -->
</view>

</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue'
	import { getpmSortList } from '../.././API/poemApi'
	export default defineComponent({
		props: ["sortList"],
		setup(sortList) {
			const sList = ref()
			const activeNum = ref()
			const activeText = ref()
			const handlebtn = ((item, index) => {
				activeNum.value = index
				activeText.value = item.poemsDynasty
				console.log(index, '---', item.poemsDynasty);
				// getpmSortList()
			})
			console.log("sortList",sortList);

			return {
				sList,
				activeText,
				handlebtn,
				activeNum
			}
		}
	})
</script>

<style lang="less">
	page {
		// background-color: white;
	}

	// *{

	// 	box-sizing: border-box;
	// }
	.scrollBox {

		display: flex;
		align-items: center;
		background-color: white;
		// padding: 0rpx 30rpx;
		font-size: 14px;
		// width: 90%;
		// margin: 0 auto;
		// border-radius: 0rpx;
		font-family: '宋体';

		.scrollBox_Left {
			// padding: 0 30rpx;
			margin: 0 5vw;
			white-space: nowrap;
			color: #dac079;
			// border: 1px solid red;
		}

		.scroll_view {
			// background-color: pink;
			height: 100rpx;
			white-space: nowrap;
			line-height: 100rpx;
			width: 81vw;

			view {
				display: inline-block;
				// padding: 0 20px;
				margin: 0 20px;
			}
		}
	}

	// 点击的分类
	.itemActive {
		color: #dac079;
	}
</style>